<template>
  <div class="hello">
      <Menu @on-select="select" mode="horizontal" :theme="theme1" active-name="1">
        <MenuItem class="logo-box" name="1">
                <router-link to="/first"><img class="logo" src="../assets/youview.png" alt=""></router-link> 
            </MenuItem>
         
            <MenuItem name="1">
                <Icon type="ios-paper" />
                <router-link to="/">写文章</router-link>
            </MenuItem>
            <MenuItem name="2">
                <Icon type="ios-construct" />
                <router-link  to="/drafts">个人中心</router-link>
            </MenuItem>
			<MenuItem style="float: right;" name="3">
			    <Icon type="ios-construct" />
			    <router-link style="color: #fff;" to="/login">登录</router-link>
			</MenuItem>
        </Menu>
  </div>
</template>

<script>
export default {
  data(){
	  return{
		  theme1: 'dark'
	  }
  },
  created() {
  	
  },
  methods:{
	  select(name){
		  
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
	margin-top: 0;
}
 .router-link-active{
     text-decoration: none;
  }
  a {
	  color: #fff;
      text-decoraction: none;
  }
  .logo-box{
    margin-top: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .logo{
    height: auto;
    width: 180px;
  }
</style>
